
import React, {Component} from 'react'
import echarts from 'echarts/lib/echarts';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import  'echarts/lib/chart/pie';

class PieChart extends Component{
    constructor(props){
        super(props)
        this.state= {
            data: {},
        }
    }

    componentDidMount(){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.props.id));

        const colorList = ['#61E5FD','#305FE4', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
        
        let getOutSideData = (data) => {
            let outsideData = [];
            data.map((item, index) => {
                let outsideItem = {...item}
                outsideItem.itemStyle = {
                    normal: {
                        borderWidth: 1,
                        borderColor: colorList[index]
                    },
                }
                outsideData.push(outsideItem)
            })
            return outsideData;
        }
        // 绘制图表
        myChart.setOption({
            aria: {
                show: true
            },
            title: {
                text: this.props.chartData.title,
                x: 'center',
                bottom: '10%',               
                textStyle: {
                    fontSize: 14,
                    fontStyle: "normal",
                    fontWeight: "lighter"
                },
            },
            series: [
                {
                  name: '内存总量',
                  type: 'pie',
                  radius: '60%',
                  center: ['50%', '40%'],
                  clockwise: false,
                  data: this.props.chartData.data,
                  itemStyle: {
                    normal: {
                      color: (params) => {
                        return colorList[params.dataIndex];
                      },
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      formatter: '{b}({c})',
                      align: 'right',
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                      length: 2,
                      length2: 10,
                    },
                  },
                },
                {
                  name: '内存总量' + '外圈',
                  type: 'pie',
                  radius: ['65%', '65%'],
                  center: ['50%', '40%'],
                  clockwise: false,
                  hoverAnimation: false,
                  data: getOutSideData(this.props.chartData.data),
                //   [
                //     {
                //       value: 6,
                //       name: '可用',
                //       itemStyle: {
                //         normal: {
                //           borderWidth: 1,
                //           borderColor: (params)=>{
                //               return colorList[params.dataIndex]
                //           },
                //         },
                //       },
                //     },
                //     {
                //       value: 10,
                //       name: '已使用',
                //       itemStyle: {
                //         normal: {
                //           borderWidth: 1,
                //           borderColor: '#305FE4',
                //         },
                //       },
                //     },
                //   ],
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                },
              ],
        });
    }

    render(){
        return (
            <div id={this.props.id} style={{width: "400px", height: '300px', float: 'left'}}></div>
        )
    }
}

export default PieChart;

